<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="base/layout.html">

<!-- start: Content -->
<div layout:fragment="content" class="main ">

    <div class="row">
        <div class="col-lg-12">
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a th:href="@{../infoManage/indexTotal}">首页</a></li>
                <li><i class="fa fa-table"></i>企业信息统计</li>
            </ol>
        </div>
    </div>


    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-indent red"></i><strong>查询信息</strong></h2>
                </div>
                <div class="panel-body">
                    <form id="modularForm"  method="post"
                          class="form-horizontal " role="form">


                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">承办部门</label>

                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectDepartment" name="departmentid" class="form-control" size="1">

                                        </select>
                                    </div>

                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">合作单位性质</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectUnitsNature" name="unitsnatureid" class="form-control"
                                                size="1">

                                        </select>
                                    </div>


                                    <button id="submitBtn" type="button" class="btn btn-sm btn-success"><i class="fa fa-dot-circle-o"></i> 统计</button>
                                    <button id="resetBtn" type="button" class="btn btn-sm btn-danger"><i class="fa fa-ban"></i> 重置</button>

                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">企业类型</label>

                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectCooperativeType" name="cooperativetypeid" class="form-control"
                                                size="1">

                                        </select>
                                    </div>

                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">企业规模</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectScaleInfo" name="scaleid" class="form-control" size="1">

                                        </select>
                                    </div>


                                </div>

                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">外资属性</label>

                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectForeignProperty" name="foreignpropertyid" class="form-control"
                                                size="1">

                                        </select>
                                    </div>


                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">项目分类</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectProjectType" name="projecttypeid" class="form-control"
                                                size="1">

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">是否签署合作协议</label>

                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <select id="signagreement" name="signagreement" class="form-control" size="1">
                                            <option value="-1">请选择</option>
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </div>

                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">行政区属</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectAdministrativeDistrict" name="administrativedistrictid" class="form-control" size="1">

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">企业所在地</label>

                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <select id="selectEnterpriseLocation" name="enterpriselocationid" class="form-control"
                                                size="1">

                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-12 control-label">协议签署时间</label>
                            <div class="col-lg-10 col-md-10">
                                <div class="row">
                                    <div class="col-lg-2 col-md-2">
                                        <input type="text" class="form-control date-picker" id="beginSignagreement"
                                               name="beginSignagreement" readonly placeholder="起始时间">

                                    </div>
                                    <label class="col-lg-1 col-md-1 col-sm-1 control-label"
                                           style="text-align: center">-</label>
                                    <div class="col-lg-2 col-md-2">
                                        <input type="text" class="form-control date-picker" id="endSignagreement"
                                               name="endSignagreement" readonly placeholder="终止时间">
                                    </div>
                                    <label class="col-lg-2 col-md-2 col-sm-12 control-label">时间类别</label>
                                    <div class="col-lg-2 col-md-2">
                                        <select id="statisticalType" name="statisticaltype" class="form-control" size="1">
                                            <option value="1">年份</option>
                                            <option value="2">季度</option>
                                            <option value="3">月份</option>
                                            <option value="4">周次</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div><!--.col-->
    </div><!--.row-->

    <div class="row">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h2><i class="fa fa-table red"></i><span class="break"></span><strong>企业信息统计</strong></h2>

                </div>
                <div class="panel-body">
                    <label class="col-lg-2 col-md-2 col-sm-12 control-label"></label>
                    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                    <div id="main" style="width: 800px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>


    <script>

        $(document).ready(function () {
            //加载承办部门
            initDepartment();
            //加载行政区属
            initAdministrativeDistrict();
            //加载企业所在地
            initEnterpriseLocation();
            //加载合作单位性质
            initUnitsNature();
            //加载企业类型
            initCooperativeType();
            //加载企业规模
            initScale();
            //加载外资属性
            initForeignProperty();
            //加载项目分类
            initProjectType();
            //加载时间控件
            setDatePicker("#beginSignagreement");
            setDatePicker("#endSignagreement");
        });


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '企业信息统计图'
            },
            tooltip: {},
            toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    magicType : {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            legend: {
                data: ['企业数量']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '企业数量',
                type: 'line',
                data: []
            }],
            optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data;
                var series = opt.series;
                var table = '<table id="test" class="table-bordered table-striped" style="width:100%;text-align:center">' + '<tbody><tr>' + '<td>日期</td>' + '<td>' + series[0].name + '</td>' + '</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                    table += '<tr>' + '<td>' + axisData[i] + '</td>' + '<td>' + series[0].data[i] + '</td>'+ '</tr>';
                }
                table += '</tbody>';
                return table;
            }
        };
        myChart.setOption(option);

        //加载承办部门
        function initDepartment() {


            $("#selectDepartment").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../department/selectDepartmentInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {
                    for (var i in data) {
                        $("#selectDepartment").append("<option value=" + data[i].id + ">" + data[i].department + "</option>");
                    }
                }
            })
        }

        //加载行政区属
        function initAdministrativeDistrict() {
            $("#selectAdministrativeDistrict").append("<option value=-1>请选择</option>");
            $.ajax({
                url:'../administrativeDistrict/SelectAdministrativeDistrictInfo',
                type:'get',
                dataType:'json',
                data:{},
                success:function (data) {
                    for (var i in data ){
                        $("#selectAdministrativeDistrict").append("<option value=" + data[i].id + ">" + data[i].administrativedistrict + "</option>");
                    }
                }
            })
        }

        //加载企业所在地
        function initEnterpriseLocation() {
            $("#selectEnterpriseLocation").append("<option value=-1>请选择</option>");
            $.ajax({
                url:'../enterpriseLocation/SelectEnterpriseLocationInfo',
                type:'get',
                dataType:'json',
                data:{},
                success:function (data) {
                    for (var i in data ){
                        $("#selectEnterpriseLocation").append("<option value=" + data[i].id + ">" + data[i].enterpriselocation + "</option>");
                    }
                }
            })
        }



        //加载合作单位性质
        function initUnitsNature() {


            $("#selectUnitsNature").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../unitsNature/selectUnitsNatureInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {

                    for (var i in data) {
                        $("#selectUnitsNature").append("<option value=" + data[i].id + ">" + data[i].name + "</option>");
                    }
                }
            })

        }

        //加载企业类型
        function initCooperativeType() {


            $("#selectCooperativeType").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../cooperativeType/selectCooperativeTypeInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {

                    for (var i in data) {
                        $("#selectCooperativeType").append("<option value=" + data[i].id + ">" + data[i].type + "</option>");
                    }


                }
            })

        }

        //加载企业规模
        function initScale() {


            $("#selectScaleInfo").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../scale/selectScaleInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {

                    for (var i in data) {

                        $("#selectScaleInfo").append("<option value=" + data[i].id + ">" + data[i].scale + "</option>");
                    }


                }
            })

        }

        //加载外资属性
        function initForeignProperty() {


            $("#selectForeignProperty").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../foreignProperty/selectForeignPropertyInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {

                    for (var i in data) {

                        $("#selectForeignProperty").append("<option value=" + data[i].id + ">" + data[i].property + "</option>");
                    }


                }
            })

        }

        //加载项目分类
        function initProjectType() {


            $("#selectProjectType").append("<option value=-1>请选择</option>");
            $.ajax({
                url: '../projectType/selectProjectTypeInfo',
                type: 'get',
                dataType: 'json',
                data: {},
                success: function (data) {

                    for (var i in data) {
                        $("#selectProjectType").append("<option value=" + data[i].id + ">" + data[i].projecttype + "</option>");
                    }
                }
            })

        }

        //重置按钮
        $("#resetBtn").on("click", function () {
            $("#selectDepartment").val("-1");


            $("#selectUnitsNature").val("-1");
            $("#selectCooperativeType").val("-1");
            $("#selectScaleInfo").val("-1");
            $("#selectForeignProperty").val("-1");
            $("#signagreement").val("-1");
            $("#insideyn").val("-1");
            $("#selectProjectType").val("-1");

            $("#beginSignagreement").val("");

            $("#endSignagreement").val("");
            $("#statisticalType").val("1");

        });

        //统计
        $("#submitBtn").on("click", function () {
            $('#modularForm').ajaxSubmit({
                url: '../workInfo/selectWorkInfoStatistics',
                type: 'post',
                success: function (data) {

                    var num_ = [];
                    var str_ = [];

                    for (var i = 0; i < data.length; i++) {
                        num_.push(data[i].unitNum);

                        str_.push(data[i].dateCount);

                    }
                    myChart.setOption({
                        xAxis: {
                            data: str_
                        },
                        series: [{
                            name: '企业数量',
                            data: num_
                        }]
                    })
                }
            })
        });



        //导出
        $("#exportBtn").on("click", function () {
            var mycanvas = $("#main").find("canvas")[0];

            var image = mycanvas.toDataURL("image/png");

            var $a = document.createElement('a');
            $a.setAttribute("href", image);
            $a.setAttribute("download", "统计图片下载");
            $a.click();


        });


    </script>


</div>
</html>